<template>
  <div>
    <el-menu-item v-if="!item.children||item.children.length===0" :index="resolvePath(item)" @click="handleMenuSelect(item)">
      <!--<i :class="item.icon"></i>-->
      <icon :iconClass="item.meta.icon ? item.meta.icon : ''"   v-if="item.level == 1"></icon>
      <span slot="title" style="color:#fff">{{ item.label }}</span>
    </el-menu-item>
    <el-submenu v-else  :index="item.id">
      <template slot="title">
        <!--<i :class="item.icon"></i>-->
        <icon :iconClass="item.meta.icon ? item.meta.icon : ''" v-if="item.level == 1"></icon>

        <!--菜单-->
        <span slot="title" v-show="(!isCollapse && item.level != 1)">{{ item.label }}</span>
        <span slot="title" v-show="isCollapse">{{ item.label }}</span>
      </template>
      <menu-item v-for="child in item.children"
        :key="child.id"
        :item="child"
        :index="child.id"
        @select="handleMenuSelect"
        @keyup.native="handleEnterPress"

      />
    </el-submenu>
  </div>
</template>
<script>
export default {
  name: 'menuItem',
  props: ['item', 'isCollapse'],
  methods: {
    handleMenuSelect(item) {
      this.$emit('select', item)
    },
    handleEnterPress(event) {
      let {roleCodes = [], code} = this.utils.getCurrentUser()
      let show = false
      if (code == 'admin' || roleCodes.includes('admin')) {
        show = true
      }
      if (event.key !== 'Control' && event.code !== 'MetaLeft') {
        return
      }
      if (process.env.NODE_ENV === 'development' && show) {
        global.utils.openMenu('programmerMenu')
      }
    },
    resolvePath(item) {
      return '/' + item.meta.route
    }
  }
}
</script>
